<!--
 * @Author: John Trump
 * @Date: 2020-07-14 10:53:40
 * @LastEditors: John Trump
 * @LastEditTime: 2020-07-16 10:48:43
 * @FilePath: /src/components/BasicLayout.vue
-->

<template>
  <div class="nav-wrapper">
    <mu-bottom-nav :value.sync="shift" color="#33CB98">
      <mu-bottom-nav-item
        value="today"
        title="今日"
        icon=":icon iconfont icon-jintian"
        to="/"
      ></mu-bottom-nav-item>
      <mu-bottom-nav-item
        value="record"
        title="记录"
        icon=":icon iconfont icon-jilu"
        to="/health"
      ></mu-bottom-nav-item>
      <mu-bottom-nav-item
        value="mine"
        title="我的"
        icon=":icon iconfont icon-wode"
        to="/my"
      ></mu-bottom-nav-item>
    </mu-bottom-nav>
  </div>
</template>

<script>
export default {
  name: "BasicLayout",
  data() {
    return {};
  },
  computed: {
    shift() {
      const path = this.$route.path;

      return path.indexOf("/health") >= 0
        ? "record"
        : path.indexOf("/my") >= 0
        ? "mine"
        : "today";
    },
  },
};
</script>

<style lang="less" scoped>
.nav-wrapper {
  /deep/ .mu-bottom-nav {
    // position: absolute;
    position: fixed;
    top: 0;
    right: 0;
    height: 1080px;
    width: 8%;
  }
  /deep/ .mu-bottom-nav-shift-wrapper {
    display: flex;
    flex-direction: column;
  }
  /deep/ .mu-bottom-item-icon {
    margin: 0;
  }
  /deep/ .iconfont {
    width: 100%;
  }

  /deep/ .mu-bottom-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
  }
  /deep/ .mu-bottom-item-text {
    font-size: 35px;
  }
  /deep/ .mu-bottom-item-active .mu-bottom-item-text {
    font-size: 45px;
  }
  /deep/ .iconfont {
    font-size: 80px;
  }
  /deep/ .mu-bottom-item-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    // display: table;
    // height: 100%;
    // margin-top: 75px;
  }
}
</style>
